<template>
  <view class="container">
    <canvas
      class="gesture-canvas"
      canvas-id="gestureCanvas"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
    ></canvas>
    <view class="tip">{{ tipText }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      r: 30, // 圆半径
      circles: [], // 9个点
      touchedPoints: [], // 用户路径
      ctx: null,
      tipText: '请绘制签到图案'
    }
  },
  onReady() {
    this.initCanvas()
  },
  methods: {
    initCanvas() {
      const ctx = uni.createCanvasContext('gestureCanvas', this)
      this.ctx = ctx
      const width = uni.upx2px(600)
      const height = uni.upx2px(600)
      const r = this.r
      const offset = width / 4

      let index = 1
      for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 3; j++) {
          const x = offset * (j + 1)
          const y = offset * (i + 1)
          this.circles.push({ x, y, index })
          index++
        }
      }
      this.drawPoints()
    },

    drawPoints() {
      const ctx = this.ctx
      ctx.clearRect(0, 0, 600, 600)
      this.circles.forEach((point) => {
        ctx.beginPath()
        ctx.arc(point.x, point.y, this.r, 0, Math.PI * 2)
        ctx.setStrokeStyle('#007AFF')
        ctx.stroke()
        ctx.closePath()
      })

      if (this.touchedPoints.length > 1) {
        ctx.beginPath()
        ctx.moveTo(this.touchedPoints[0].x, this.touchedPoints[0].y)
        for (let i = 1; i < this.touchedPoints.length; i++) {
          ctx.lineTo(this.touchedPoints[i].x, this.touchedPoints[i].y)
        }
        ctx.setStrokeStyle('#FF5722')
        ctx.setLineWidth(4)
        ctx.stroke()
        ctx.closePath()
      }
      ctx.draw()
    },

    getTouchPoint(touch) {
      const x = touch.x
      const y = touch.y
      for (let i = 0; i < this.circles.length; i++) {
        const p = this.circles[i]
        const dx = p.x - x
        const dy = p.y - y
        const distance = Math.sqrt(dx * dx + dy * dy)
        if (distance < this.r) {
          return p
        }
      }
      return null
    },

    onTouchStart(e) {
      this.touchedPoints = []
      const point = this.getTouchPoint(e.touches[0])
      if (point && !this.touchedPoints.includes(point)) {
        this.touchedPoints.push(point)
        this.drawPoints()
      }
    },

    onTouchMove(e) {
      const point = this.getTouchPoint(e.touches[0])
      if (point && !this.touchedPoints.find(p => p.index === point.index)) {
        this.touchedPoints.push(point)
        this.drawPoints()
      }
    },

    onTouchEnd() {
      if (this.touchedPoints.length < 4) {
        this.tipText = '图案太短，请重试'
      } else {
        this.tipText = '签到成功！图案路径：' +
          this.touchedPoints.map(p => p.index).join('-')
        // 这里你可以调用接口提交签到信息
      }
      setTimeout(() => {
        this.tipText = '请绘制签到图案'
        this.touchedPoints = []
        this.drawPoints()
      }, 1500)
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 100rpx;
}
.gesture-canvas {
  width: 600rpx;
  height: 600rpx;
  background-color: #f5f5f5;
  border-radius: 20rpx;
}
.tip {
  margin-top: 40rpx;
  font-size: 32rpx;
  color: #333;
}
</style>
